<script src="@/js/index/index.js"></script>

<template>

  <div id="app" class="index">

    <!-- 主页 -->
    <div class="home">
      <div class="margins">
        <div class="left">
          <b class="title">
            <Icon type="md-megaphone" />
            中华传统文化探索
          </b>
          <div class="content">
            中华传统文化是中华文明的智慧结晶和精华所在，是中华民族的根与魂、是自强不息、发展壮大的强大精神力量。
            <br /><br />
            塑造了中华文明的连续性、创新性、统一性、包容性与和平性。
          </div>
        </div>
        <div class="right">
          <img src="@/assets/pic/index/index.png" />
        </div>
      </div>
    </div>

    <!-- 文化 -->
    <div class="wenhua">
      <div class="margins">
        <div class="title">
          文化
        </div>
        <div class="title2">
          阴阳、五行、天干、地支、八卦、...
        </div>
        <div class="content">
          <el-row :gutter="15">
            <el-col :span="6" v-for="item in wenhua" :key="item">
              <el-card shadow="hover">
                <template #header>
                  <div class="title">
                    {{ item.name }}
                  </div>
                </template>
                <router-link :to="item.link">
                  <img :src="item.img" />
                </router-link>
                <div class="more">
                  <router-link :to="item.link">
                    <span>
                      更多
                      <Icon type="ios-add-circle" />
                    </span>
                  </router-link>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 工具 -->
    <div class="gongju">
      <div class="margins">
        <div class="title">
          工具
        </div>
        <div class="title2">
          八字排盘、奇门排盘、...
        </div>
        <div class="content">
          <div class="paipan" v-for="item in gongju" :key="item">
            <div class="left">
              <b class="title">
                <Icon type="ios-arrow-dropright-circle" />
                {{ item.name }}
              </b>
              <div class="introduce">
                {{ item.introduce }}
              </div>
              <div class="use-button">
                <router-link :to="item.link">
                  <button>开始使用</button>
                </router-link>
              </div>
            </div>
            <div class="right">
              <router-link :to="item.link">
                <img :src="item.img" />
              </router-link>
            </div>
            <div>&nbsp;</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 网站概况 -->
    <div class="gaikuang">
      <div class="margins">
        <div class="title">
          网站概况
        </div>
        <div class="title2">
          化繁琐为纯朴，回归极致简洁的界面、呈现更为详细的数据
        </div>
        <div class="echarts" id="main"></div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="less" src="@/css/index/index.scss"></style>
